<template>
  <div class="big-event">
    <logo :type="'white'"></logo>
    <div class="event-ct ani"
    swiper-animate-effect="zoomIn" swiper-animate-duration=".5s" swiper-animate-delay=".4s">
      <p class="title">{{title}}</p>
      <div class="events-ct">
        <swiper class="events" :option="eventsSwiperOption">
          <swiper-slide v-for="(item,index) in renderData" :key="index" class="event-swiper-item">
            <div class="event-info">
              <img :src="item.resource" alt="">
              <p class="detail">{{item.description}}</p>
            </div>
            <div class="timeline">
              <p>{{item.name}}</p>
            </div>
          </swiper-slide>
        </swiper>
      </div>
    </div>
  </div>
</template>

<script>
import logo from './logo'
export default {
  data() {
    return {
      title: '企业大事记',
      eventsSwiperOption: {

      }
    }
  },
  computed:{
    renderData(){
      let info = JSON.parse(JSON.stringify(this.events))
      info.shift()
      return info
    }
  },
  props: {
    events: {
      type: Array,
      default() {
        return [
          
        ]
      }
    }
  },
  components: {
    logo
  }
}
</script>

<style lang="scss" scoped>
.big-event {
  position: relative;
  height: 100%;
  background-image: url(./img/big-event.jpg);
  background-position: bottom center;
  background-repeat: no-repeat;
  background-size: cover;
  color: #333;
}

.event-ct {
  position: absolute;
  top: rem(402);
  left: rem(30);
  width: rem(690);
  height: rem(666);
  background-color: #fff;
  .title {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: rem(56);
    height: 100%;
    background-color: #d82e2d;
    line-height: rem(45);
    font-size: rem(32);
    color: #fff;
    text-align: center;
  }
  .events-ct {
    margin-left: rem(56);
    width: rem(634);
    height: 100%;
    .event-swiper-item {
      width: 100%;
    }
    .event-info {
      margin: rem(20) rem(20) 0;
      height: rem(538);
      img {
        display: block;
        width: 100%;
        height: rem(313);
      }
      .detail {
        margin-top: rem(16);
        line-height: rem(39);
        font-size: rem(26);
      }
    }
    .timeline {
      box-sizing: border-box;
      padding-top: rem(41);
      height: rem(108);
      background-color: #f5f5f5;
      font-size: rem(22);
      color: #666;
      text-align: center;
      p {
        position: relative;
        padding-top: rem(26);
        border-top: 1px solid #e6e6e6;
        &::before,
        &::after {
          content: '';
          position: absolute;
          left: 50%;
          top: 0;
          transform: translate(-50%,-50%);
          display: block;
          border-radius: 50%;
          transform-origin: 50% 50%;
        }
        &::before {
          width: rem(20);
          height: rem(20);
          background-color: #e2252d;
          z-index: 1;
        }
        &::after {
          width: rem(40);
          height: rem(40);
          background-color: rgba(251,151,156,.8);
          animation: breath 2s ease infinite;
        }
      }
    }
  }
}

@keyframes breath {
  0% {
    transform: translate(-50%,-50%) scale(.5);
    opacity: 1;
  }
  70% {
    transform: translate(-50%,-50%) scale(.8);
    opacity: .8;
  }
  100% {
    transform: translate(-50%,-50%) scale(1);
    opacity: 0;
  }
}
</style>
